import { useDidShow, useReachBottom, useRouter } from "@tarojs/taro";
import { Navigator } from "@tarojs/components";

import useList from "@/hooks/useList";
import ByRow from "@/components/ui/ByRow";
import Card from "@/components/common/Card";
import ByText from "@/components/ui/ByText";
import Page from "@/components/common/Page";
import ByCell from "@/components/ui/ByCell";
import Moment from "@/components/app/Moment";
import ByButton from "@/components/ui/ByButton";
import UserItem from "@/components/app/UserItem";
import ListView from "@/components/app/ListView";

import ApiWorkflow from "@/api/workflow";
import useEnum from "@/hooks/useEnum";
import { objectToQueryString } from "@/utils";

// 状态
const enumStatusOptions = [
  // { label: "待审核", value: 0, color: "warning" },
  { label: "待审核", value: 1, color: "warning" },
  { label: "已通过", value: 2, color: "success" },
  { label: "已驳回", value: 3, color: "error" },
];

const RecordCard = ({ source }: { source: any }) => {
  const { getOption } = useEnum(enumStatusOptions);

  const {
    businessId,
    createDate,
    instanceState,
    intentCustomerId,
    workFlowInstanceId,
  } = source;

  const query = {
    businessId,
    intentCustomerId,
    wl_id: workFlowInstanceId,
  };

  const config = getOption(instanceState);

  return (
    <Navigator hoverClass="none" url={`detail?${objectToQueryString(query)}`}>
      <Card className="m-3">
        <ByRow content="between" align="center" className="mb-2">
          <ByText bold size="lg">
            {source.instanceName}
          </ByText>
          <ByText type={config?.color} size="sm">
            {config?.label}
          </ByText>
        </ByRow>

        <ByCell size="small" label="签报表单的类型:">
          /
        </ByCell>

        <ByRow content="between" align="center" className="mt-2">
          <UserItem name={source.createUserName} />
          <ByText type="third" size="sm">
            <Moment value={createDate} type="full" />
          </ByText>
        </ByRow>
      </Card>
    </Navigator>
  );
};

export default () => {
  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId);

  const search = { intentCustomerId, typeCode: "FI_SignReport" };

  const { loading, list, nextPage, resetToFirst } = useList<any>(
    ApiWorkflow.workflowInstanceList,
    { defaultParams: [search], manual: true }
  );

  useReachBottom(nextPage);

  useDidShow(() => resetToFirst(search));

  return (
    <>
      <Page
        footerSticky
        slotFooter={
          <ByButton
            className="w-2/3"
            size="large"
            to={`apply?intentCustomerId=${intentCustomerId}`}
          >
            新增签报
          </ByButton>
        }
      >
        <ListView loading={loading} isEmpty={list.length === 0}>
          {list.map((item) => (
            <RecordCard source={item} key={item.workFlowInstanceId} />
          ))}
        </ListView>
      </Page>
    </>
  );
};
